<!DOCTYPE html>
<!--[if lt IE 7]>

<html class="lt-ie9 lt-ie8 lt-ie7" lang="en">

<![endif]-->
<!--[if IE 7]>

<html class="lt-ie9 lt-ie8" lang="en">

<![endif]-->
<!--[if IE 8]>

<html class="lt-ie9" lang="en">

<![endif]-->
<!--[if gt IE 8]>
<!-->

<html lang="en">

    <!--
  <![endif]-->
    <head>
        <meta charset="utf-8">
        <title>
            Cofico - Phần Mềm Quản Lý Kho
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <!-- bootstrap css -->
        <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
        </script>
        <link href="icomoon/style.css" rel="stylesheet">
        <link href="css/main.css" rel="stylesheet"> <!-- Important. For Theming change primary-color variable in main.css  -->
        <!--[if lte IE 7]>
        <script src="css/icomoon-font/lte-ie7.js">
        </script>
        <![endif]-->
        <link href="css/wysiwyg/bootstrap-wysihtml5.css" rel="stylesheet">
        <link href="css/wysiwyg/wysiwyg-color.css" rel="stylesheet">
        <link href="css/charts-graphs.css" rel="stylesheet">
        <link href="css/clockface.css" rel="stylesheet">
        <link href="css/timepicker.css" rel="stylesheet">

    </head>
    <body>
        <header>
            <a href="#" class="logo">
                <img src="img/LOGO_COFICO.png" style="width: 20%;" alt="logo" />
            </a>
            <div class="btn-group">
                <button class="btn btn-primary">
                    Admin
                </button>
                <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
                    <span class="caret">
                    </span>
                </button>
                <ul class="dropdown-menu pull-right">
                    <li>
                        <a href="#">
                            Edit Profile
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Account Settings
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Logout
                        </a>
                    </li>
                </ul>
            </div>
            <ul class="mini-nav">
                <li>
                    <a href="#">
                        <div class="fs1" aria-hidden="true" data-icon="&#xe040;"></div>
                        <span class="info-label badge badge-warning">
                            3
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="fs1" aria-hidden="true" data-icon="&#xe04c;"></div>
                        <span class="info-label badge badge-info">
                            5
                        </span>
                    </a>
                </li>
            </ul>

        </header>
        <div class="container-fluid">
            <div class="dashboard-container">
                <div class="top-nav">
                    <ul>
                        <li>
                            <a href="index.html" >
                                <div class="fs1" aria-hidden="true" data-icon="&#xe19a;"></div>
                                Trang chủ
                            </a>
                        </li>
                        <li>
                            <a href="du-an.html" class="selected">
                                <div class="fs1" aria-hidden="true" data-icon="&#xe003;"></div>
                                Dự án
                            </a>
                        </li>
                        <li>
                            <a href="nha-cung-cap.html">
                                <div class="fs1" aria-hidden="true" data-icon="&#xe0ab;"></div>
                                Nhà cung cấp
                            </a>
                        </li>
                        <li >
                            <a href="vat-tu.html">
                                <div class="fs1" aria-hidden="true" data-icon="&#xe03b;"></div>
                                Vật tư
                            </a>
                        </li>
                        <li>
                            <a href="xuat-nhap.html">
                                <div class="fs1" aria-hidden="true" data-icon="&#xe11d;"></div>
                                Xuất - Nhập
                            </a>
                        </li>
                        <li>
                            <a href="bao-cao.html">
                                <div class="fs1" aria-hidden="true" data-icon="&#xe14a;"></div>
                                Báo cáo
                            </a>
                        </li>
                        <li>
                            <a href="nguoi-dung.html">
                                <div class="fs1" aria-hidden="true" data-icon="&#xe071;"></div>
                                Người dùng
                            </a>
                        </li>
                        <li>
                            <a href="lich-bieu.html">
                                <div class="fs1" aria-hidden="true" data-icon="&#xe052;"></div>
                                Lịch biểu
                            </a>
                        </li>
                    </ul>
                    <div class="clearfix">
                    </div>
                </div>
                <div class="sub-nav">
                    <ul>
                        <li><a href="" class="heading">Ngân sách dự án</a></li>
                        <li>
                            <a href="du-an.html">
                                Dự án
                            </a>
                        </li>

                    </ul>
                    <div class="btn-group pull-right">
                        <button class="btn btn-primary">
                            Main Menu
                        </button>
                        <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
                            <span class="caret">
                            </span>
                        </button>
                        <ul class="dropdown-menu pull-right">
                            <li>
                                <a href="index.html" data-original-title="">
                                    Trang chủ
                                </a>
                            </li>
                            <li>
                                <a href="#" data-original-title="">
                                    Dự án
                                </a>
                            </li>
                            <li>
                                <a href="nha-cung-cap.html" data-original-title="">
                                    Nhà cung cấp
                                </a>
                            </li>
                            <li>
                                <a href="#" data-original-title="">
                                    Vật tư
                                </a>
                            </li>
                            <li>
                                <a href="#" data-original-title="">
                                    Xuất - Nhập
                                </a>
                            </li>
                            <li>
                                <a href="#" data-original-title="">
                                    Báo cáo
                                </a>
                            </li>
                            <li>
                                <a href="#" data-original-title="">
                                    Người dùng
                                </a>
                            </li>
                            <li>
                                <a href="lich-bieu.html" data-original-title="">
                                    Lịch biểu
                                </a>
                            </li>
                            <li>
                                <a href="help.html" data-original-title="">
                                    Trợ giúp
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="dashboard-wrapper">
                    <div class="left-sidebar" style="margin-right: 0px;">

                        <div class="row-fluid">
                            <div class="span12">
                                <div class="widget">
                                    <div class="widget-header">
                                        <div class="title">
                                            Form nhập liệu
                                        </div>

                                    </div>
                                    <div class="widget-body">

                                        <form class="form-horizontal no-margin">
                                            <div class="control-group">
                                                <label for="country" class="control-label">
                                                    Tên dự án
                                                </label>
                                                <div class="controls">
                                                    <select class="span6" id="stateAndCity">

                                                        <option selected="selected" value="">
                                                            Chọn tên dự án
                                                        </option>

                                                        <option value="Xây dựng cầu đường">
                                                            Xây dựng cầu đường
                                                        </option> 
                                                        <option value="Dân dung">
                                                            Dân dụng
                                                        </option>
                                                        <option value="">
                                                            Công trình A
                                                        </option>
                                                        <option value="">
                                                            Công trình B
                                                        </option>
                                                        <option value="">
                                                            Công trình C
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label for="country" class="control-label">
                                                    Tên nhóm vật tư
                                                </label>
                                                <div class="controls">
                                                    <select class="span6" id="stateAndCity">

                                                        <option selected="selected" value="">
                                                            Chọn nhóm vật tư
                                                        </option>

                                                        <option value="Bê tông">
                                                            Bê tông
                                                        </option> 
                                                        <option value="">
                                                            Gạch đá
                                                        </option>
                                                        <option value="">
                                                            Cát sạn
                                                        </option>
                                                        <option value="">
                                                            Xi măng
                                                        </option>
                                                        <option value="">
                                                            Vật tư
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label for="name" class="control-label">
                                                    Khối lượng duyệt
                                                </label>
                                                <div class="controls">
                                                    <input value="" type="text" placeholder="Nhập khối lượng duyêt..." class="span6" id="email1" name="address">
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label">
                                                    Đơn giá duyệt
                                                </label>
                                                <div class="controls">
                                                    <input type="text" placeholder="Nhập đơn giá duyệt..." class="span6" value="" id="" name="">
                                                    
                                                </div>
                                            </div>                                           

                                            <div class="control-group">
                                                <label for="repPassword" class="control-label">
                                                    Ghi chú
                                                </label>
                                                <div class="controls">
                                                    <textarea placeholder="Ghi chú ở đây..." class="input-block-level span6" name="description3" id="description3" rows="3"></textarea>
                                                </div>
                                            </div>
                                            <div class="form-actions no-margin">

                                                <button style="margin-left: 5px;" class="btn btn-info pull-right" type="submit">
                                                    Thêm mới
                                                </button>

                                                <a href="ngan-sach-du-an.html" class="btn btn-inverse pull-right" type="submit">
                                                    Trở lại
                                                </a>
                                                <div class="clearfix">
                                                </div>
                                            </div>

                                        </form>

                                    </div>
                                </div>
                            </div>

                        </div>






                    </div>

                </div>
            </div>
            <!--/.fluid-container-->
        </div>


        <script src="js/wysiwyg/wysihtml5-0.3.0.js">
        </script>
        <script src="js/jquery.min.js">
        </script>
        <script src="js/bootstrap.js">
        </script>
        <script src="js/jquery.scrollUp.js">
        </script>
        <script src="js/wysiwyg/bootstrap-wysihtml5.js">
        </script>
        <script src="js/bootstrap-colorpicker.js">
        </script>
        <script type="text/javascript" src="js/date-picker/date.js">
        </script>
        <script type="text/javascript" src="js/date-picker/daterangepicker.js">
        </script>
        <script type="text/javascript" src="js/clockface.js">
        </script>
        <script type="text/javascript" src="js/bootstrap-timepicker.js">
        </script>
        <script type="text/javascript" src="js/jquery.bootstrap.wizard.js">
        </script>


        <script type="text/javascript">
            //ScrollUp
            $(function() {
                $.scrollUp({
                    scrollName: 'scrollUp', // Element ID
                    topDistance: '300', // Distance from top before showing element (px)
                    topSpeed: 300, // Speed back to top (ms)
                    animation: 'fade', // Fade, slide, none
                    animationInSpeed: 400, // Animation in speed (ms)
                    animationOutSpeed: 400, // Animation out speed (ms)
                    scrollText: 'Scroll to top', // Text for element
                    activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
                });
            });

            //Tooltip
            $('a').tooltip('hide');

            //Popover
            $('.popover-pop').popover('hide');

            //Collapse
            $('#myCollapsible').collapse({
                toggle: false
            })

            //Tabs
            $('.myTabBeauty a').click(function(e) {
                e.preventDefault();
                $(this).tab('show');
            })

            //Dropdown
            $('.dropdown-toggle').dropdown();

            //wysihtml5
            $('#wysiwyg').wysihtml5();

            //Color picker
            $('.colorpicker').colorpicker();

            //Bootstrap Timepicker
            $('#timepicker1').timepicker();

            $('#timepicker2').timepicker({
                minuteStep: 1,
                secondStep: 5,
                showInputs: false,
                template: 'modal',
                modalBackdrop: true,
                showSeconds: true,
                showMeridian: false
            });

            $('#timepicker3').timepicker({
                minuteStep: 5,
                secondStep: 30,
                showInputs: false,
                showSeconds: true,
                showMeridian: false
            });


            //Time Picker Clockface Plugin
            $(function() {

                $('#time1').clockface({
                    format: 'HH:mm',
                    trigger: 'manual'
                });

                $('#toggle-btn').click(function(e) {
                    e.stopPropagation();
                    $('#time1').clockface('toggle');
                });

            });

            //Date picker
            $('.date_picker').daterangepicker({
                opens: 'right'
            });

            //Date Picker

            $('.report_range').daterangepicker({
                ranges: {
                    'Today': ['today', 'today'],
                    'Yesterday': ['yesterday', 'yesterday'],
                    'Last 7 Days': [Date.today().add({
                            days: -6
                        }), 'today'],
                    'Last 30 Days': [Date.today().add({
                            days: -29
                        }), 'today'],
                    'This Month': [Date.today().moveToFirstDayOfMonth(), Date.today().moveToLastDayOfMonth()],
                    'Last Month': [Date.today().moveToFirstDayOfMonth().add({
                            months: -1
                        }), Date.today().moveToFirstDayOfMonth().add({
                            days: -1
                        })]
                },
                opens: 'right',
                format: 'MM/dd/yyyy',
                separator: ' to ',
                startDate: Date.today().add({
                    days: -29
                }),
                endDate: Date.today(),
                minDate: '01/01/2012',
                maxDate: '12/31/2013',
                locale: {
                    applyLabel: 'Submit',
                    fromLabel: 'From',
                    toLabel: 'To',
                    customRangeLabel: 'Custom Range',
                    daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                    monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    firstDay: 1
                },
                showWeekNumbers: true,
                buttonClasses: ['btn-danger']
            },
            function(start, end) {
                $('.report_range span').html(start.toString('MMMM d, yyyy') + ' - ' + end.toString('MMMM d, yyyy'));
            });

            //Set the initial state of the picker label
            $('.report_range span').html(Date.today().add({
                days: -29
            }).toString('MMMM d, yyyy') + ' - ' + Date.today().toString('MMMM d, yyyy'));


            //Wizard Progressbar

            $('#inverse').bootstrapWizard({
                'tabClass': 'nav',
                'debug': false,
                onShow: function(tab, navigation, index) {
                    console.log('onShow');
                },
                onNext: function(tab, navigation, index) {
                    console.log('onNext');
                    if (index == 2) {
                        // Make sure we entered the name
                        if (!$('#name').val()) {
                            alert('You must enter your name');
                            $('#name').focus();
                            return false;
                        }
                    }

                    // Set the name for the next tab
                    $('#inverse-tab3').html('Hello, ' + $('#name').val());

                },
                onPrevious: function(tab, navigation, index) {
                    console.log('onPrevious');
                },
                onLast: function(tab, navigation, index) {
                    console.log('onLast');
                },
                onTabClick: function(tab, navigation, index) {
                    console.log('onTabClick');
                    alert('on tab click disabled');
                    return false;
                },
                onTabShow: function(tab, navigation, index) {
                    console.log('onTabShow');
                    var $total = navigation.find('li').length;
                    var $current = index + 1;
                    var $percent = ($current / $total) * 100;
                    $('#inverse').find('.bar').css({
                        width: $percent + '%'
                    });
                }
            });


            //Wizard Progressbar tabs left

            $('#tabsleft').bootstrapWizard({
                'tabClass': 'nav nav-tabs',
                'debug': false,
                onShow: function(tab, navigation, index) {
                    console.log('onShow');
                },
                onNext: function(tab, navigation, index) {
                    console.log('onNext');
                },
                onPrevious: function(tab, navigation, index) {
                    console.log('onPrevious');
                },
                onLast: function(tab, navigation, index) {
                    console.log('onLast');
                },
                onTabClick: function(tab, navigation, index) {
                    console.log('onTabClick');

                },
                onTabShow: function(tab, navigation, index) {
                    console.log('onTabShow');
                    var $total = navigation.find('li').length;
                    var $current = index + 1;
                    var $percent = ($current / $total) * 100;
                    $('#tabsleft').find('.bar').css({
                        width: $percent + '%'
                    });

                    // If it's the last tab then hide the last button and show the finish instead
                    if ($current >= $total) {
                        $('#tabsleft').find('.pager .next').hide();
                        $('#tabsleft').find('.pager .finish').show();
                        $('#tabsleft').find('.pager .finish').removeClass('disabled');
                    } else {
                        $('#tabsleft').find('.pager .next').show();
                        $('#tabsleft').find('.pager .finish').hide();
                    }

                }
            });


            $('#tabsleft .finish').click(function() {
                alert('Finished!, Starting over!');
                $('#tabsleft').find("a[href*='tabsleft-tab1']").trigger('click');
            });
        </script>
    </body>
</html>